<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户首页</title>
    <link rel="stylesheet" type="text/css" href="css/userHome.css"> <!-- 引入css文件 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .windows{
            position: relative;
            border: 3px rgb(146, 146, 146) solid;
            width: 700px;
            height: 450px;
            background-color: rgb(250, 186, 186);
            margin: 10px auto;
            overflow: hidden;
        }
        .leftbtn{
            z-index: 999;
            position: absolute;
            box-sizing: border-box;
            top: 195px;
            left: 0;
            width: 50px;
            height: 70px;
            background-color: rgba(136, 135, 135, 0.582);
            line-height: 70px;
            text-align: center;
            font-size: 35px;
            color: rgba(255, 255, 255, 0.609);
            cursor: pointer;
            display: none;
        }
        .leftbtn:hover{
            background-color: rgba(189, 186, 186, 0.623);
            color: aliceblue;
        }
        .rightbtn{
            z-index: 999;
            position: absolute;
            box-sizing: border-box;
            top: 195px;
            right: 0;
            width: 50px;
            height: 70px;
            background-color: rgba(136, 135, 135, 0.609);
            line-height: 70px;
            text-align: center;
            font-size: 35px;
            color: rgba(255, 255, 255, 0.596);
            cursor: pointer;
            display: none;
        }
        .rightbtn:hover{
            background-color: rgba(189, 186, 186, 0.623);
            color: aliceblue;
        }
        .imgbox{
            position:absolute;
            left: 0;
            top: 0;
            box-sizing: border-box;
            width: 700%;
            height: 450px;
        }
        .imgbox li{
            float: left;
            box-sizing: border-box;
            width: 700px;
            height: 450px;
            list-style: none;
        }
        .imgbox li a{
            box-sizing: border-box;
            display: inline-block;
            width: 700px;
            height: 450px;
            background-color: rgb(134, 152, 255);
        }
        .imgbox li a img{
            cursor:auto;
            width: 700px;
            height: 450px;
        }
        .circlebox{
            position: absolute;
            bottom: 0;
            width: 700px;
            height: 40px;
            background-color: rgba(94, 94, 94, 0.486);

        }
        .circle {
            position: absolute;
            bottom: 10px;
            left: 300px;
        }
        .circle li {
            float: left;
            width: 7px;
            height: 7px;
            list-style: none;
            border: 2px solid rgb(185, 185, 185);
            border-radius:100%;
            margin: 3px;
            cursor: pointer;
            background-color: rgb(173, 173, 173);
        }
        .circlecolor{
            background-color: coral !important;
            border: 2px solid coral !important;
        }
    </style>

    <style>
        #main{
            margin: 1px auto;
            width: 500px;
        }
        .dialog{
            position: relative;
            width: 240px;
            height: 80px;
            text-align: center;
            line-height: 40px;
            background: rgb(38, 215, 160);
            border: 2px solid #000;
            border-radius: 3px;
        }
        .dialog::before{
            content: '';
            display: block;
            position: absolute;
            top: 2px;
            left: 2px;
            width: 240px;
            height: 80px;
            background-color: #ccc;
            border: 2px solid #000;
            border-radius: 3px;
            z-index: -1;
        }
        .dialog::after{
            content: '……………………………………………………………………';
            display: block;
            position: absolute;
            top: -5px;
            left: -450px;
            z-index: -2;
        }
        .h{
            margin: 20px auto;
        }
    </style>
    <script src="js/run.js"></script>

<style>
    body {
        background: url("img/NY.jpg") no-repeat top fixed;
        background-size: 100%;
        background-size: cover;
    }
    footer{
        background: url("img/NY.jpg") no-repeat top fixed;
        background-size: 100%;
        background-size: cover;
    }
</style>
</head>
<body>
<div id="main">
    <div class="dialog" style="font-size:50px">
        <div class="h">环绿回收</div>
    </div>
</div>
<!--
<div class="windows">
    <div class="leftbtn"> < </div>
    <div class="rightbtn"> > </div>
    <ul class="imgbox">
        <li>
            <a href="#"><img src="test/1.png" alt="轮播图" class="lunboimg"></a>
        </li>
        <li>
            <a href="#"><img src="test/2.png" alt="轮播图" class="lunboimg"></a>
        </li>
        <li>
            <a href="#"><img src="test/3.png" alt="轮播图" class="lunboimg"></a>
        </li>
        <li>
            <a href="#"><img src="test/4.png" alt="轮播图" class="lunboimg"></a>
        </li>
        <li>
            <a href="#"><img src="test/5.png" alt="轮播图" class="lunboimg"></a>
        </li>
        <li>
            <a href="#"><img src="test/6.png" alt="轮播图" class="lunboimg"></a>
        </li>
    </ul>
    <div class="circlebox">
        <ol class="circle"></ol>
    </div>
</div>
-->

<div>
    <!-- 结构 -->
    <!-- 页面部分 -->
    <header>
        <!-- nav导航部分 -->
        <nav>
            <!-- logo部分 -->
            <div class="logo">
                <img style="width: 100px" src="img/cell.png" alt="logo图标">
            </div>
            <!-- 导航栏部分 -->
            <div class="navbar">
                <ul>
                    <li style="font-size:25px"><a href="#">上门回收垃圾      环绿为您服务</a></li>
                </ul>
            </div>

            <!-- 搜索栏部分 -->
            <div class="search">
                <form action="">
                    <input type="text" placeholder="请输入关键字搜索">
                    <input type="submit" value="搜索">
                </form>
            </div>
    </header>
    <!-- banner部分 -->
    <div class="windows">
            <!-- 左侧导航栏 侧边栏 -->
            <!--<div class="slidebar">
                &lt;!&ndash;<ul>
                    <li><a href="#">前端开发<span>&gt;</span></a></li>
                    <li><a href="#">后端开发<span>&gt;</span></a></li>
                    <li><a href="#">移动开发<span>&gt;</span></a></li>
                    <li><a href="#">人工智能<span>&gt;</span></a></li>
                    <li><a href="#">商业预测<span>&gt;</span></a></li>
                    <li><a href="#">云计算&大数据<span>&gt;</span></a></li>
                    <li><a href="#">运维&从测试<span>&gt;</span></a></li>
                    <li><a href="#">UI设计<span>&gt;</span></a></li>
                    <li><a href="#">产品设计<span>&gt;</span></a></li>
                    <li><a href="#">量身定做<span>&gt;</span></a></li>
                </ul>&ndash;&gt;
            </div>-->
                <div class="leftbtn"> < </div>
                <div class="rightbtn"> > </div>
                <ul class="imgbox">
                    <li>
                        <a href="#"><img src="test/1.png" alt="轮播图" class="lunboimg"></a>
                    </li>
                    <li>
                        <a href="#"><img src="test/2.png" alt="轮播图" class="lunboimg"></a>
                    </li>
                    <li>
                        <a href="#"><img src="test/3.png" alt="轮播图" class="lunboimg"></a>
                    </li>
                    <li>
                        <a href="#"><img src="test/4.png" alt="轮播图" class="lunboimg"></a>
                    </li>
                    <li>
                        <a href="#"><img src="test/5.png" alt="轮播图" class="lunboimg"></a>
                    </li>
                    <li>
                        <a href="#"><img src="test/6.png" alt="轮播图" class="lunboimg"></a>
                    </li>
                </ul>
                <div class="circlebox">
                    <ol class="circle"></ol>
                </div>

            <!-- 小课表部分 -->
            <!--<div class="timetable">
                <dt>我的课程表</dt>
                <dd>
                    <h4>小葵花课堂开课了</h4>
                    <p>零基础宝宝可以学习的课程</p>
                </dd>
                <dd>
                    <h4>海星宝宝正在直播</h4>
                    <p>每晚7点准时在线直播开麦</p>
                </dd>
                <dd>
                    <h4>上海幼儿园正在招生</h4>
                    <p>给宝宝妈妈们一个惊喜</p>
                </dd>
                <dd>
                    <h4>小孩的大闹的黄金讲座</h4>
                    <p>每晚20点准时开播</p>
                </dd>
                <dd>
                    <a href="#">全部课程信息</a>
                </dd>
            </div>-->
    </div>
    <!-- 精装推荐 -->
    <div class="recommecd contener">
        <a href="#">环绿回收</a>
        <a href="#">垃圾回收</a>
        <a href="#">环保小贴士</a>
        <a href="#">系统公告</a>
        <a href="#">个人信息</a>
        <a href="#">积分商城</a>
        <a href="#">环保知识</a>
        <a href="#">联系我们</a>
    </div>
    <!-- 精品推荐大模块 -->
    <div class="crecom-products contener">
        <!-- 标题头 -->
        <div class="recom-hd">
            <h4>环绿课堂</h4>
            <a href="#">查看全部</a>
        </div>
        <!-- 精品推荐主题部分 -->
        <div class="recom-bd clearfix">  <!-- 此处需要清除浮动 -->
            <ul>
                <li>
                    <div style="width:228px ;height:155px; background: url(img/cell.png) no-repeat center center; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div>
                    <h5>环保项目，家园更美</h5>
                    <p><span>高级</span> • 1125人在线学习</p>
                </li>
                <li>
                    <div style="width:228px ;height:155px; background: url(img/cell.png) no-repeat center top; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div>
                    <h5>环保从孩子做起</h5>
                    <p><span>高级</span> • 1125人在线学习</p>
                </li>
                <li>
                    <div style="width:228px ;height:155px; background: url(imgs/userIcon/avatar.jpg) no-repeat center top; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div>
                    <h5>回收，地球有你更健康</h5>
                    <p><span>高级</span> • 1125人在线学习</p>
                </li>
                <li>
                    <div style="width:228px ;height:155px; background: url(img/login-icon.jpg) no-repeat center center; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div>
                    <h5>垃圾回收打包小技巧</h5>
                    <p><span>高级</span> • 1125人在线学习</p>
                </li>
                <li>
                    <div style="width:228px ;height:155px; background: url(img/cell.png) no-repeat center center; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div>
                    <h5>垃圾回收，新闻</h5>
                    <p><span>高级</span> • 1125人在线学习</p>
                </li>
                <li>
                    <div style="width:228px ;height:155px; background: url(img/superbg.jpg) no-repeat center center; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div>
                    <h5>回收记录，打包技巧</h5>
                    <p><span>高级</span> • 1125人在线学习</p>
                </li>
                <li>
                    <div style="width:228px ;height:155px; background: url(img/userbg.jpg) no-repeat center center; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div>
                    <h5>种树小课程</h5>
                    <p><span>高级</span> • 1125人在线学习</p>
                </li>
                <li>
                    <div style="width:228px ;height:155px; background: url(img/bg2.png) no-repeat center center; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div>
                    <h5>你不知道的，循环知识</h5>
                    <p><span>高级</span> • 1125人在线学习</p>
                </li>
                <li>
                    <div style="width:228px ;height:155px; background: url(img/bg1.png) no-repeat center top; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div>
                    <h5>环绿回收，有你才最美</h5>
                    <p><span>高级</span> • 1125人在线学习</p>
                </li>
                <li>
                    <div style="width:228px ;height:155px; background: url(img/bg1.jpg) no-repeat center center; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div>
                    <h5>回收吧</h5>
                    <p><span>高级</span> • 1125人在线学习</p>
                </li>
            </ul>
        </div>
    </div>
    <!-- 页面底部 -->
    <footer>
        <div class="footer-in contener">
            <!-- 页面底部分为左右两部分 -->
            <div class="footer-l">
                <img style="width: 150px" src="img/cell.png" >
                <p>致力于在线普及中华文明传统美德,引领环保青山在2022年突破新的高度。<br/>
                    © 2022年CELL.保留权利。-lwg号</p>
                <a href="#">下载APP</a>
            </div>
            <div class="footer-r">
                <dl>
                    <dt>关于环绿回收</dt>
                    <dd>管理团队</dd>
                    <dd>工作团队</dd>
                    <dd>客户帮助</dd>
                    <dd>招兵买马</dd>
                    <dd>留言帮助</dd>
                </dl>
                <dl>
                    <dt>友情链接</dt>
                    <dd>昆明理工大学</dd>
                    <dd>云南大学</dd>
                    <dd>北京大学</dd>
                    <dd>重庆大学</dd>
                    <dd>山西大学</dd>
                </dl>
                <dl>
                    <dt>赞助商</dt>
                    <dd>李一有限公司</dd>
                    <dd>姜春云有限公司</dd>
                    <dd>你好陈旭有限公司</dd>
                    <dd>坑底不吭宇凡有限公司</dd>
                    <dd>谁到罗航有限公司</dd>
                    <dd>佳明有限公司</dd>
                    <dd>广招云南有限公司</dd>
                </dl>
                <dl>
                    <dt>招商建设</dt>
                    <dd>域名购买</dd>
                    <dd>广告位投放</dd>
                    <dd>开发者建议</dd>
                    <dd>培训</dd>
                    <dd>留言帮助</dd>
                </dl>
            </div>
        </div>
    </footer>
</div>
</body>
</html>